<template>
    <div class="song-cell">
        <song-cell-item v-for="(item, index) in data" :key="index" :data-index="index" :data="item" @play-click="triggerPlay"
            :order="order"
            :index="index"
            :detail="detail"
        ></song-cell-item>
    </div>
</template>

<script>
import songCellItem from './songCellItem'
import { musicMixin } from '@/utils/mixin'

export default {
    components: {
        songCellItem
    },
    mixins: [musicMixin],
    props: {
        data:{
            type: Array
        },
        order: {
            type: Boolean,
            default: false
        },
        detail: {
            type: Boolean,
            default: false
        }
    },

    methods: {
        triggerPlay(data){
            
            this.setPlayInfo(data.id).then(res => {
                let index = this.data.findIndex((item)=> {
                    return item.id === data.id
                });

                this.setPlayIndex(index);
                
                if(this.playList.length == 0){
                    // this.setPlayList(this.data.map(item => item.id));
                    this.setPlayList(this.data);
                    
                    
                }
                
                this.playMusic();
            });
            
        }
    } 
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global';
    .song-cell {
        padding : 0 px2rem(6);
    }
</style>